<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta class="description" content="女性服装，配饰。提供最优质的服务与产品">
    <meta class="keywords" content="服装，女装，优质，独特，服务">
    <title>Casey女装</title>
</head>

<link rel="stylesheet" href="../CSS/initialization.css">
<link rel="stylesheet" href="../CSS/indexStyle.css">

<body>

    <div id="container" class="container">
        <div id="circleBox" class="circleBox">
        
<!--登录板块 -->
        <div id="loginDiv" class="loginDiv">
            <div class="loginDivContent loginDivContent1">
                	登录
            </div>
               <form id="loginForm" action="../loginServlet">
            	<div class="loginDivContent loginDivContent2">
                 <input id="loginInputUsername" name="loginUsername" type="text" id="inputUsername" class="inputUsername">
                 <div class="jumpLetterContainer">
                     <div id="jumpLetterLUsername1" class="jumpLetter jumpLetterLUsername1"
                         style="transition-delay:0ms">
                         A</div>
                     <div id="jumpLetterLUsername2" class="jumpLetter jumpLetterLUsername2"
                         style="transition-delay:50ms">d
                     </div>
                     <div id="jumpLetterLUsername3" class="jumpLetter jumpLetterLUsername3"
                         style="transition-delay:100ms">m
                     </div>
                     <div id="jumpLetterLUsername4" class="jumpLetter jumpLetterLUsername4"
                         style="transition-delay:150ms">i
                     </div>
                     <div id="jumpLetterLUsername5" class="jumpLetter jumpLetterLUsername5"
                         style="transition-delay:200ms">n
                     </div>
                 </div>
             </div>
             <div class="loginDivContent loginDivContent3">
                 <input id=loginInputPassword name="loginPassword" type="password" id="inputPassword" class="inputPassword">
                 <div style="margin-bottom:0px;" class="jumpLetterContainer">
                     <div id="jumpLetterLPassword1" class="jumpLetter jumpLetterLPassword1"
                         style="transition-delay:0ms;">
                         P</div>
                     <div id="jumpLetterLPassword2" class="jumpLetter jumpLetterLPassword2"
                         style="transition-delay:50ms;">a
                     </div>
                     <div id="jumpLetterLPassword3" class="jumpLetter jumpLetterLPassword3"
                         style="transition-delay:100ms;">s
                     </div>
                     <div id="jumpLetterLPassword4" class="jumpLetter jumpLetterLPassword4"
                         style="transition-delay:150ms;">s
                     </div>
                     <div id="jumpLetterLPassword5" class="jumpLetter jumpLetterLPassword5"
                         style="transition-delay:200ms;">w
                     </div>
                     <div id="jumpLetterLPassword6" class="jumpLetter jumpLetterLPassword6"
                         style="transition-delay:250ms;">o
                     </div>
                     <div id="jumpLetterLPassword7" class="jumpLetter jumpLetterLPassword7"
                         style="transition-delay:300ms;">r
                     </div>
                     <div id="jumpLetterLPassword8" class="jumpLetter jumpLetterLPassword8"
                         style="transition-delay:350ms;">d
                     </div>
                 </div>
             </div>
				<div class="loginDivContent loginDivContent4" style="display:flex;justify-content:center;">
					<button	 id="loginButton" class="loginButton" onClick="submitLogin()">Login</button>
				</div>
            </form>
        </div>
           
<!--注册板块 -->
        <div id="signupDiv" class="signupDiv">
            <div class="signupDivContent signupDivContent1">
               	 注册账号
            </div>
            <form id="signupForm" action="../signupServlet">
	            <div class="signupDivContent signupDivContent2">
	                <input id="signupInputUsername" name="signupUsername" type="text" id="inputUsername" class="inputUsername">
	                <div class="jumpLetterContainer">
	                    <div id="jumpLetterSUsername1" class="jumpLetter jumpLetterSUsername1"
	                        style="transition-delay:0ms;">
	                        A</div>
	                    <div id="jumpLetterSUsername2" class="jumpLetter jumpLetterSUsername2"
	                        style="transition-delay:50ms;">d
	                    </div>
	                    <div id="jumpLetterSUsername3" class="jumpLetter jumpLetterSUsername3"
	                        style="transition-delay:100ms;">m
	                    </div>
	                    <div id="jumpLetterSUsername4" class="jumpLetter jumpLetterSUsername4"
	                        style="transition-delay:150ms;">i
	                    </div>
	                    <div id="jumpLetterSUsername5" class="jumpLetter jumpLetterSUsername5"
	                        style="transition-delay:200ms;">n
	                    </div>
	                </div>
	            </div>
	            <div class="signupDivContent signupDivContent3">
	                <input id="signupInputPassword" name="signupPassword" type="password" id="inputPassword" class="inputPassword">
	                <div class="jumpLetterContainer">
	                    <div id="jumpLetterSPassword1" class="jumpLetter jumpLetterSPassword1"
	                        style="transition-delay:0ms;">
	                        P</div>
	                    <div id="jumpLetterSPassword2" class="jumpLetter jumpLetterSPassword2"
	                        style="transition-delay:50ms;">a
	                    </div>
	                    <div id="jumpLetterSPassword3" class="jumpLetter jumpLetterSPassword3"
	                        style="transition-delay:100ms;">s
	                    </div>
	                    <div id="jumpLetterSPassword4" class="jumpLetter jumpLetterSPassword4"
	                        style="transition-delay:150ms;">s
	                    </div>
	                    <div id="jumpLetterSPassword5" class="jumpLetter jumpLetterSPassword5"
	                        style="transition-delay:200ms;">w
	                    </div>
	                    <div id="jumpLetterSPassword6" class="jumpLetter jumpLetterSPassword6"
	                        style="transition-delay:250ms;">o
	                    </div>
	                    <div id="jumpLetterSPassword7" class="jumpLetter jumpLetterSPassword7"
	                        style="transition-delay:300ms;">r
	                    </div>
	                    <div id="jumpLetterSPassword8" class="jumpLetter jumpLetterSPassword8"
	                        style="transition-delay:350ms;">d
	                    </div>
	                </div>
	            </div>
	            <div style="margin-bottom:0px;" class="signupDivContent signupDivContent4">
	                <input id="signupInputTel" name="signupTel" type="text" id="inputTel" class="inputTel">
	                <div class="jumpLetterContainer">
	                    <div id="jumpLetterSTel1" class="jumpLetter jumpLetterSTel1" style="transition-delay:0ms;">T
	                    </div>
	                    <div id="jumpLetterSTel2" class="jumpLetter jumpLetterSTel2" style="transition-delay:50ms;">e
	                    </div>
	                    <div id="jumpLetterSTel3" class="jumpLetter jumpLetterSTel3" style="transition-delay:100ms;">l
	                    </div>
	                    <div id="jumpLetterSTel4" class="jumpLetter jumpLetterSTel4" style="transition-delay:150ms;">N
	                    </div>
	                    <div id="jumpLetterSTel5" class="jumpLetter jumpLetterSTel5" style="transition-delay:200ms;">u
	                    </div>
	                    <div id="jumpLetterSTel6" class="jumpLetter jumpLetterSTel6" style="transition-delay:250ms;">m
	                    </div>
	                    <div id="jumpLetterSTel7" class="jumpLetter jumpLetterSTel7" style="transition-delay:300ms;">b
	                    </div>
	                    <div id="jumpLetterSTel8" class="jumpLetter jumpLetterSTel8" style="transition-delay:400ms;">e
	                    </div>
	                    <div id="jumpLetterSTel9" class="jumpLetter jumpLetterSTel9" style="transition-delay:450ms;">r
	                    </div>
	                </div>
	            </div> 
             	<div class="signupDivContent signupDivContent5" style="display:flex;justify-content:center;margin-top:8px;">
               		<button id="signupButton" class="signupButton" onClick="submitSignup()">SignUp</button>
          		</div>
            </form>    
       		</div>
        </div>
    </div>
        
<!--板块切换按钮 -->
    <button id="switchButton" class="switchButton">注册账户</button>

    <div class="flowerContainer flowerContainer1">
        <div class="flowerDiv flowerDiv1"><img class="flower" src="../Imgs/leave1.png" alt=""></div>
        <div class="flowerDiv flowerDiv2"><img class="flower" src="../Imgs/leave2.png" alt=""></div>
        <div class="flowerDiv flowerDiv3"><img class="flower" src="../Imgs/leave3.png" alt=""></div>
        <div class="flowerDiv flowerDiv4"><img class="flower" src="../Imgs/leave4.png" alt=""></div>
    </div>
    <div class="flowerContainer flowerContainer2">
        <div class="flowerDiv flowerDiv1"><img class="flower" src="../Imgs/leave1.png" alt=""></div>
        <div class="flowerDiv flowerDiv2"><img class="flower" src="../Imgs/leave2.png" alt=""></div>
        <div class="flowerDiv flowerDiv3"><img class="flower" src="../Imgs/leave3.png" alt=""></div>
        <div class="flowerDiv flowerDiv4"><img class="flower" src="../Imgs/leave4.png" alt=""></div>
    </div>
    <div class="flowerContainer flowerContainer3">
        <div class="flowerDiv flowerDiv1"><img class="flower" src="../Imgs/leave1.png" alt=""></div>
        <div class="flowerDiv flowerDiv2"><img class="flower" src="../Imgs/leave2.png" alt=""></div>
        <div class="flowerDiv flowerDiv3"><img class="flower" src="../Imgs/leave3.png" alt=""></div>
        <div class="flowerDiv flowerDiv4"><img class="flower" src="../Imgs/leave4.png" alt=""></div>
    </div>

</body>

<script>
    var loginDiv = document.getElementById("loginDiv");
    var signupDiv = document.getElementById("signupDiv");
    
    var switchButton = document.getElementById("switchButton");
    
    var circleBox = document.getElementById("circleBox");
    
    var loginInputUsername = document.getElementById("loginInputUsername");
    var loginInputPassword = document.getElementById("loginInputPassword");
    var signupInputUsername = document.getElementById("signupInputUsername");
    var signupInputPassword = document.getElementById("signupInputPassword");
    var signupInputTel = document.getElementById("signupInputTel");
    
    var loginForm=document.getElementById("loginForm");
    var signupForm=document.getElementById("signumForm");
    
    switchButton.addEventListener("click", switchDiv);

    var status = 1;
    function switchDiv() {
        if (status == 1) {
            circleBox.classList.remove("circleBoxMoveR");
            circleBox.classList.add("circleBoxMove");
            switchButton.classList.remove("switchButtonMoveR");
            switchButton.classList.add("switchButtonMoveL");
            switchButton.innerHTML = "已有账户？登录";
            status = -1;
        } else {
            circleBox.classList.remove("circleBoxMove");
            circleBox.classList.add("circleBoxMoveR");
            switchButton.classList.remove("switchButtonMoveL");
            switchButton.classList.add("switchButtonMoveR");
            switchButton.innerHTML = "注册账户";
            status = 1;
        }
    }

    // 开始字符跳动
    loginInputUsername.onfocus = function () {
		for (var i = 1; i < 6; i++) {
		    const temp = ".jumpLetterLUsername" + i;
		    document.querySelector(temp).classList.add("jumpLetterJump");
		}
    }
    loginInputUsername.onblur = function () {
    	if(loginInputUsername.value.length==0){
            for (var i = 1; i < 6; i++) {
                const temp = ".jumpLetterLUsername" + i;
                document.querySelector(temp).classList.remove("jumpLetterJump");
            }
    	}else{
//     		保持字符弹起状态
    	}
    }
    loginInputPassword.onfocus = function () {
        for (var i = 1; i < 9; i++) {
            const temp = ".jumpLetterLPassword" + i;
            document.querySelector(temp).classList.add("jumpLetterJump");
        }
    }
    loginInputPassword.onblur = function () {
    	if(loginInputPassword.value.length==0){
	        for (var i = 1; i < 9; i++) {
	            const temp = ".jumpLetterLPassword" + i;
	            document.querySelector(temp).classList.remove("jumpLetterJump");
	        }
        }
    }
    signupInputUsername.onfocus = function () {
        for (var i = 1; i < 6; i++) {
            const temp = ".jumpLetterSUsername" + i;
            document.querySelector(temp).classList.add("jumpLetterJump");
        }
    }
    signupInputUsername.onblur = function () {
    	if(signupInputUsername.value.length==0){
	        for (var i = 1; i < 6; i++) {
	            const temp = ".jumpLetterSUsername" + i;
	            document.querySelector(temp).classList.remove("jumpLetterJump");
	        }	
    	}
    }
    signupInputPassword.onfocus = function () {
        for (var i = 1; i < 9; i++) {
            const temp = ".jumpLetterSPassword" + i;
            document.querySelector(temp).classList.add("jumpLetterJump");
        }
    }
    signupInputPassword.onblur = function () {
    	if(signupInputPassword.value.length==0){
	        for (var i = 1; i < 9; i++) {
	            const temp = ".jumpLetterSPassword" + i;
	            document.querySelector(temp).classList.remove("jumpLetterJump");
	        }
    	}
    }
    signupInputTel.onfocus = function () {
        for (var i = 1; i < 10; i++) {
            const temp = ".jumpLetterSTel" + i;
            document.querySelector(temp).classList.add("jumpLetterJump");
        }
    }
    signupInputTel.onblur = function () {
    	if(signupInputTel.value.length==0){
	        for (var i = 1; i < 10; i++) {
	            const temp = ".jumpLetterSTel" + i;
	            document.querySelector(temp).classList.remove("jumpLetterJump");
	        }
    	}
    }
// 字符跳动结束

// 登录和注册请求的提交
function submitLogin(){
	const username=loginInputUsername.value;
	const password=loginInputPassword.value;
	loginForm.onsubmit=function(){
		if((username.length>=2 && username.length<13) && (password.length>2 && password.length<13)){
			return true;
		}else{
			alert("账号不符合要求，请重新检查输入");
			return false;
		}
	}
}

function submitSignup(){
	const signinInputUsername=signinInputUsername.value;
	const signinInputPassword=signupInputPassword.value;
	const signinInputTel=signinInputTel.value;
	signupForm.onsubmit=function(){
		if((signinInputUsername.length>2 && signinInputUsername.length<13) && (signinInputPassword.length>2 && signinInputPassword.length<13) && signinInputTel.length==11){
			return true;
		}else{
			alert("注册信息不符合要求，请重新检查输入");
			return false;
		}
	}	
	alert(signinInputUsername);
}


</script>

</html>